<template>
  <div class="profile-information">
    <div class="profile-number">
      <span class="privateImage">
        <i class="iconfont icon-icon-test1"></i>
      </span>
      <div class="icon-mobile">
        <p>登录/注册</p>
        <p>
          <span>
            <i class="iconfont icon-shouji"></i>
          </span>
          <span>暂无绑定手机号</span>
        </p>
      </div>
      <span class="arrow-right">
        <i class="iconfont icon-icon-test2"></i>
      </span>
    </div>
    <div class="info-data">
      <ul class="clear">
        <li class="info-data-link">
          <span class="info-data-top">
            <b>0.00</b>元
          </span>
          <span class="info-data-bottom">我的余额</span>
        </li>
        <li class="info-data-link">
          <span class="info-data-top">
          <b>0.00</b>个
          </span>
          <span class="info-data-bottom">我的优惠</span>
        </li>
        <li class="info-data-link">
          <span class="info-data-top">
          <b>0.00</b>分
          </span>
          <span class="info-data-bottom">我的积分</span>
        </li>
      </ul>
    </div>
    <div class="profile-data">
      <div class="div-myorder">
        <router-link to="/home" class="myorder">
          <div class="myorder-div">
            <span>我的订单</span>
            <span>
            <i class="iconfont icon-icon-test2"></i>
          </span>
          </div>
        </router-link>
        <router-link to="/home" class="myorder">
          <div class="myorder-div">
            <span>积分商城</span>
            <span>
            <i class="iconfont icon-icon-test2"></i>
          </span>
          </div>
        </router-link>
        <router-link to="/home" class="myorder">
          <div class="myorder-div">
            <span>饿了么会员卡</span>
            <span>
            <i class="iconfont icon-icon-test2"></i>
        </span>
          </div>
        </router-link>
        <router-link to="/home" class="myorder">
          <div class="myorder-div">
            <span>服务中心</span>
            <span>
            <i class="iconfont icon-icon-test2"></i>
        </span>
          </div>
        </router-link>
        <router-link to="/home" class="myorder">
          <div class="myorder-div">
            <span>下载APP</span>
            <span>
            <i class="iconfont icon-icon-test2"></i>
        </span>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'profileNumber'
}
</script>

<style scoped lang="scss">
  .profile-information{
   .profile-number{
     background-color: #3190e8;
     .privateImage{
       display: inline-block;
       .icon-icon-test1{
         font-size: 60px;
         color: #FFFFFF;
         margin-left: 10px;
       }
     }
     .icon-mobile{
       display: inline-block;
       color: #FFFFFF;
       margin-left: 10px;
     }
     .arrow-right{
       display: inline-block;
       vertical-align: 15px;
       .icon-icon-test2{
         font-size: 30px;
         color: #FFFFFF;
         margin-left: 130px;
       }
     }
   }
    .info-data{
      width:100%;
      background:#f5f5f5;
      box-sizing: border-box;
      .info-data-link{
        float:left;
        width:33%;
        display:inline-block;
        border-right:1px solid #f1f1f1;
        .info-data-top{
          display:block;
          text-align:center;
          b{
            line-height: 55px;
            font-weight:700;
            color: #FF9900;
          }
        }
        .info-data-bottom{
          display:block;
          color: #666666;
          font-weight: 400;
          text-align:center;
        }
      }
      .info-data-link:nth-of-type(2){
        .info-data-top{
          b{
            color:#ff5f3e;
          }
        }
      }
      .info-data-link:nth-of-type(3){
        .info-data-top{
          b{
            color:#6ac20b;
          }
        }
      }
    }
    .profile-data{
      margin-top: 5px;
      .div-myorder{
        .myorder{
          .myorder-div{
            span{
              display: block;
            }
            .icon-icon-test2{
              font-size: 20px;
              margin-left: 350px;
            }
          }
        }
      }
    }
  }
</style>
